<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>避免闭包</title>
</head>
<body>
  <button id="btn">add</button>

  <script>
    // 会出现内存泄漏
    function foo() {
      // el 是页面本身存在的一个元素，只是存储了一下而已，元素有 onclick 事件，是引用了foo函数内部的 function
      var el = document.getElementById('btn')
      // 调用时处在一个新的作用域，不是 foo 函数的作用域，这个函数是用户点击时才调用的，处于独立的作用域中，与 foo 不在同一作用域
      // 在onclick函数内用到了 foo 函数的 el，存在跨作用域用数据的现象
      el.onclick = function () {
        console.log(el.id)
      }
    }
    foo()

    // 优化
    function foo1() {
      // btn 本身存在于 DOM 中，不论是否引用都存在，这里相当于又对他有一个引用，理解为 btn 元素被引用了两次
      // 若未来 btn 元素被删除，此时代码中的引用还在，GC 不会回收
      var el = document.getElementById('btn')
      el.onclick = function () {
        console.log(el.id)
      }
      // 可将元素置为 null
      el = null
    }

    foo1()

  </script>
</body>
</html>